<template>
	<view class="back-view" @touchmove.stop.prevent="moveHandle">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">设置常用语</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../../static/close.png"></image>
				</view>
			</view>
			<view class="top-line"></view>
			<view>
				<uni-easyinput type="textarea" v-model="inputContent" placeholder="请输入你要添加的一条常用语" />
			</view>
			<view class="bottom-back">
				<view class="bottom-btn bottom-btn-cancel" v-if="isEdit" @click="cancelEdit">取消</view>
				<view class="bottom-btn" v-if="isEdit" @click="clickCustomerAction">保存</view>
				<view class="bottom-btn" v-if="!isEdit" @click="clickCustomerAction">添加</view>
			</view>
			<scroll-view style="height: 280px;" scroll-y="true">
				<view class="item-back" v-for="(item,index) in dataList">
					<view class="item-name">{{item.content}}</view>
					<view class="item-edit" @click="editAction(item)">编辑</view>
					<view class="item-edit" @click="deleteIt(item)">删除</view>
					<image class="item-arrow" src="../../../../static/pc_more.png"></image>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	let app = ''

	export default {
		components: {

		},
		data() {
			return {
				dataList: [],
				inputContent: '',
				role: '',
				roleUrl: '',
				isEdit: false, //编辑
				selectItem: {}
			}
		},
		mounted() {
			app = getApp()
			let _this = this


			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})

			// _this.initData()
			_this.getList();
		},
		methods: {

			/**
			 * 获取已有数据
			 */
			async getList() {
				let _this = this

				uni.showLoading({
					title: '正在加载...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/phrase/selector/0`,
					method: 'POST', //默认是GET
				})
				console.log('常用语', res)
				uni.hideLoading()
				if (res.data.code == 200) {
					_this.dataList = res.data.data
				}

			},
			/**
			 * 点击了提交
			 */
			async clickCustomerAction() {
				let _this = this
				if (_this.inputContent == '') {
					uni.showToast({
						title: '请输入常用语!',
						icon: "none"
					})
					return
				}

				let url = ''
				let method = ''
				let data = {}
				if (!_this.isEdit) {
					url = `/${_this.roleUrl}/phrase/0`
					method = 'POST'
					data = {
						content: _this.inputContent
					}
				} else {
					url = `/${_this.roleUrl}/phrase`
					method = 'PUT'
					data = {
						id: _this.selectItem.id,
						content: _this.inputContent
					}
				}

				uni.showLoading({
					title: '正在提交...'
				})
				const res = await _this.$myRequest({
					url: url,
					data: data,
					method: method, //默认是GET
				})
				console.log('提交', res)
				uni.hideLoading()
				if (res.data.code == 200) {
					uni.showToast({
						title: _this.isEdit?'编辑成功':'提交成功!',
						icon: "success",
					})
					_this.inputContent = ''
					_this.getList();
					_this.$emit("successBack");
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
					})
				}

			},
			//点击编辑
			editAction(item) {
				this.isEdit = true;
				this.selectItem = item;
				this.inputContent = item.content;
			},
			cancelEdit() {
				this.isEdit = false;
				this.selectItem = {};
				this.inputContent = '';
			},
			/**
			 * 点击了删除
			 */
			async deleteIt(item) {
				let _this = this
				uni.showLoading({
					title: '正在处理...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/phrase`,
					data: {
						ids: item.id
					},
					method: 'DELETE', //默认是GET
				})
				console.log('提交', res)
				uni.hideLoading()
				if (res.data.code == 200) {
					uni.showToast({
						title: '删除成功!',
						icon: "success",
					})
					_this.getList();
					_this.$emit("successBack");

				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
					})
				}
			},
			closeBtnAction() {
				this.$emit('setWordClose')
			},
			moveHandle() {
				return true
			},


		},
	}
</script>

<style>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.white-view-back {
		width: 552px;
		height: 500px;
		padding: 24px;
		max-height: 500px;
		background-color: white;
		margin-top: -50px;
		border-radius: 4px;
		z-index: 101;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		font-size: 18px;
		font-weight: normal;
		color: #333333;

	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.bottom-back {
		width: 100%;
		margin-top: 12px;
		margin-bottom: 10px;
		display: flex;
		justify-content: flex-end;
		align-items: center;

	}

	.bottom-btn {
		cursor: pointer;
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		color: #FFFFFF;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
.bottom-btn-cancel {
		margin-right: 10px;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		color: #333333;
	}
	.item-back {
		margin-top: 15px;
		width: 100%;
		display: flex;
		align-items: center;
	}



	.item-name {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
		max-width: 440px;
		width: 440px;
	}


	.item-edit {
		font-size: 12px;
		font-weight: 400;
		color: #2DA9C5;
		margin-left: 12px;
	}

	.item-arrow {
		width: 20px;
		height: 20px;
		min-width: 20px;
		margin-left: 12px;

	}
</style>
